<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        backgroundColor: "#23243a",
        legend: {
            data: [''],
            icon: 'circle',
            right: 'center',
            top: '8%',
            textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: 16
            }
        },
        radar: [{
            radius: '60%',
            name: {
                textStyle: {
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 16
                }
            },
            indicator: [{
                name: 'IND',
                min: 0
            }],
            center: ['50%', '50%'], // 位置
            shape: 'circle', //形状
            splitArea: {
                areaStyle: {
                    color: 'transparent', //圆环颜色
                    shadowColor: 'aqua', // 圆颜色
                    shadowBlur: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#08585F' // 分割线
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#08585F', //圆线
                    width: 2
                }
            }
        }],
        series: [{
            type: 'radar',
            data: [{
                value: [],
                name: '',
                itemStyle: {
                    color: '#327BFA',
                    opacity: 0
                },
                lineStyle: {
                    width: 0,
                    type: 'dotted'
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(50, 123, 250, 0.7)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(50, 123, 250, 0.3)' // 100% 处的颜色
                            }],
                            global: false
                        }
                    }
                }
            },
                {
                    value: []
                }
            ]
        }]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/radar/two',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                let legend;
                option.radar.indicator = result.data.indicator;
                option.series[0].data[0].value = result.data.series[0].data;
                option.series[0].data[0].name = result.data.series[0].name;
                legend = result.data.series[0].name;
                option.series[0].data[1].value = result.data.series[0].data;

                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }else if(option.legend){
                    option.legend.data = legend;
                }
                if (result.data.title && option.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
